<template>
	<view class="tab-bar">
		<view 
			class="tab-item" 
			v-for="(item, index) in tabList" 
			:key="index"
			:class="{ active: current === index }"
			@click="switchTab(index, item)"
		>
			<view class="tab-icon">
				<text class="icon">{{ item.icon }}</text>
				<view class="badge" v-if="item.badge && item.badge > 0">
					<text class="badge-text">{{ item.badge > 99 ? '99+' : item.badge }}</text>
				</view>
			</view>
			<text class="tab-text">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0
			}
		},
		computed: {
			tabList() {
				const userRole = this.$store && this.$store.state && this.$store.state.userInfo ? this.$store.state.userInfo.roleType : null
=======
		computed: {
			tabList() {
				const userRole = this.$store && this.$store.state && this.$store.state.userInfo ? this.$store.state.userInfo.roleType : null
				
				// 根据用户角色返回不同的标签页
				switch (userRole) {
					case 'admin':
						return [
							{ text: '首页', icon: '🏠', pagePath: '/pages/index/index' },
							{ text: '订单管理', icon: '📋', pagePath: '/pages/admin/orders' },
							{ text: '用户管理', icon: '👥', pagePath: '/pages/admin/users' },
							{ text: '我的', icon: '👤', pagePath: '/pages/user/profile' }
						]
					
					case 'dispatcher':
						return [
							{ text: '工作台', icon: '📊', pagePath: '/pages/dispatcher/dashboard' },
							{ text: '订单', icon: '📋', pagePath: '/pages/order/list' },
							{ text: '技术员', icon: '👨‍💻', pagePath: '/pages/dispatcher/techs' },
							{ text: '我的', icon: '👤', pagePath: '/pages/user/profile' }
						]
					
					case 'tech':
						return [
							{ text: '工作台', icon: '🔧', pagePath: '/pages/tech/dashboard' },
							{ text: '订单', icon: '📋', pagePath: '/pages/tech/orders', badge: this.getAvailableOrderCount() },
							{ text: '收入', icon: '💰', pagePath: '/pages/tech/earnings' },
							{ text: '我的', icon: '👤', pagePath: '/pages/user/profile' }
						]
					
					default: // user
						return [
							{ text: '首页', icon: '🏠', pagePath: '/pages/index/index' },
							{ text: '订单', icon: '📋', pagePath: '/pages/order/list' },
							{ text: '发布', icon: '➕', pagePath: '/pages/order/create' },
							{ text: '我的', icon: '👤', pagePath: '/pages/user/profile' }
						]
				}
			}
		},
		methods: {
			switchTab(index, item) {
				if (this.current === index) return
				
				this.$emit('change', index)
				
				// 跳转到对应页面
				if (item.pagePath) {
					uni.switchTab({
						url: item.pagePath
					})
				}
			},
			
			getAvailableOrderCount() {
				// 这里可以从store或者API获取可接订单数量
				return this.$store.state.availableOrderCount || 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		border-top: 1rpx solid #eee;
		display: flex;
		z-index: 1000;
		padding-bottom: env(safe-area-inset-bottom);
		
		.tab-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			transition: all 0.3s ease;
			
			&.active {
				.tab-icon .icon {
					transform: scale(1.1);
				}
				
				.tab-text {
					color: #007AFF;
				}
			}
			
			.tab-icon {
				position: relative;
				margin-bottom: 8rpx;
				
				.icon {
					font-size: 40rpx;
					transition: transform 0.3s ease;
				}
				
				.badge {
					position: absolute;
					top: -10rpx;
					right: -15rpx;
					background: #ff3b30;
					border-radius: 20rpx;
					min-width: 32rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.badge-text {
						font-size: 20rpx;
						color: #fff;
						font-weight: bold;
						padding: 0 8rpx;
					}
				}
			}
			
			.tab-text {
				font-size: 20rpx;
				color: #666;
				transition: color 0.3s ease;
			}
		}
	}
</style>